<!-- components/custom-form/custom-form.vue -->
<template>
	<uni-forms label-width="0">
		<uni-forms-item>
			<uni-easyinput type="text" :clearable="false" placeholder="请输入手机号" />
		</uni-forms-item>
		<uni-forms-item>
			<uni-easyinput type="password" :clearable="false" placeholder="请输入密码" />
		</uni-forms-item>
		<uni-forms-item>
			<uni-easyinput type="textarea" :clearable="false" />
		</uni-forms-item>
	</uni-forms>
	<button type="primary">提交</button>
</template>

<script setup></script>

<script>
// 选项式
export default {
	options: {
		// 小程序端额外设置
		styleIsolation: 'shared'
	}
};
</script>

<style lang="scss">
// 自定义的组件，用的是easyCom的规则
// 指定帮我们添加样式的作用域
.uni-forms {
	margin: 20px;
}

// <!-- h5 端设置这个即可 -- >
// ::v-deep 适用在h5
// 小程序断无法生效
::v-deep.uni-easyinput__content-input {
	border: 1px solid red;
	padding: 10px;
}
</style>
